<template>
  <el-card style="text-align:left">
    <div slot="header" class="clearfix">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="填写商品基本信息"></el-step>
        <el-step title="填写商品属性"></el-step>
        <el-step title="设置商品库存"></el-step>
      </el-steps>
    </div>
    <div>
      <!--第一步表单-->
      <el-form v-if="this.active==0" :model="form0" :rules="rules" ref="form0" label-width="100px">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="form0.name"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="categoryId">
          <el-cascader v-model="form0.categoryId" :options="categoryOptions"></el-cascader>
        </el-form-item>
        <el-form-item label="副标题" prop="subTitle">
          <el-input v-model="form0.subTitle" type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="商品品牌" prop="brand">
          <el-input v-model="form0.brand"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" prop="description">
          <el-input v-model="form0.description" type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="商品货号" prop="productNo">
          <el-input v-model="form0.productNo"></el-input>
        </el-form-item>
        <el-form-item label="销售价" prop="salePrice">
          <el-input v-model="form0.salePrice"></el-input>
        </el-form-item>
        <el-form-item label="市场价" prop="marketPrice">
          <el-input v-model="form0.marketPrice"></el-input>
        </el-form-item>
        <el-form-item label="计件单位" prop="unit">
          <el-input v-model="form0.unit"></el-input>
        </el-form-item>
      </el-form>

      <!--第二步表单-->
      <el-form v-if="this.active==1" :model="form1" :rules="rules" ref="form1" label-width="100px">
        <el-form-item label="商品图片" prop="images">
          <el-upload ref="upload" action="#" list-type="picture-card" :auto-upload="false" :limit=4 :on-exceed="outlimit" 
          :file-list="uploadFiles" :on-change="uploadonchange" >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip" style="color:red">*只能上传jpg/png文件，且不超过4张</div>
            <div slot="file" slot-scope="{file,fileList}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="upImageBefore(file)">
                  <i class="el-icon-back"></i>
                </span>
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete"  @click="upImageDele(file)">
                  <i class="el-icon-delete"></i>
                </span>
                  <span class="el-upload-list__item-delete" @click="upImageNext(file)">
                  <i class="el-icon-right"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
        
          <el-form-item label="规格参数" prop="detail">
                 <el-tabs v-model="descactive" type="card" >
                  <el-tab-pane label="电脑端详情" name="descpc">
                        <div id="editorpc" ></div>
                  </el-tab-pane>
                  <el-tab-pane label="移动端详情" name="desch5">
                         <div id="editorh5" ></div>
                  </el-tab-pane>
                </el-tabs>
          </el-form-item>
      </el-form>
     <!--第三步表单-->
      <el-form v-if="this.active==2" :model="form2" :rules="rules" ref="form2" label-width="100px">
          <el-form-item label="规格参数" prop="form2.kind">
               <el-select v-model="value" placeholder="请选择" :change="pkindchange">
                  <el-option
                    v-for="item in pkinds"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
          </el-form-item>
      </el-form>
    </div>
    <div style="text-align:center">
      <el-button type="primary" @click="foward()">上一步</el-button>
      <el-button type="primary" @click="next()">下一步</el-button>
      <el-button type="primary" @click="sub()">提交</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible" style="z-index:9999">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-card>
</template>

<script>
import { categorylist,productModify ,productkinds} from "@/libs/api.js";
import Editor from 'wangeditor'
export default {
  data() {
    return {
      active: 2,
      form0: {
        name: "",
        categoryId: "",
        subTitle: "",
        brand: "",
        description: "",
        productNo: "",
        salePrice: "",
        marketPrice: "",
        unit: ""
      },
      form1: {
        images: "",
        detail:{"detailpc":"pc","detailh5":"h5"}
      },
      categoryOptions: [],
      descactive:"descpc",
      dialogImageUrl: '',
      dialogVisible: false,
      uploadFiles:[],
      pkinds:[],
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
        ],
        categoryId: [
          { required: true, message: "请选择商品分类", trigger: "change" }
        ],
        subTitle: [
          { required: true, message: "请输入商品副标题", trigger: "blur" },
          { min: 3, max: 30, message: "长度在 3 到 30 个字符", trigger: "blur" }
        ],
        brand: [{ required: true, message: "请输入商品品牌", trigger: "blur" }],
        description: [
          { required: true, message: "请输入商品描述", trigger: "blur" }
        ],
        salePrice: [
          { required: true, message: "请输入商品销售价", trigger: "blur" },
          {
            pattern: /^[1-9]\d*$|^[0-9]+(.[0-9]{1,2})?$/,
            message: "请输入正确的价格",
            trigger: "blur"
          }
        ],
        marketPrice: [
          { required: true, message: "请输入商品市场价", trigger: "blur" },
          {
            pattern: /^[1-9]\d*$|^[0-9]+(.[0-9]{1,2})?$/,
            message: "请输入正确的价格",
            trigger: "blur"
          }
        ],
        unit: [
          { required: true, message: "请输入商品计件单位", trigger: "blur" }
        ]
      }
    };
  },

  methods: {
    next() {
      this.$refs["form" + this.active].validate(valid => {
        if (valid) {
          if (this.active++ > 2) {
            this.active = 2;
          }
          if(this.active==1){
             this.setEditor("editorpc",this.form1.detail.detailpc);
             this.setEditor("editorh5",this.form1.detail.detailh5);
          }
        } else {
          alert("error submit!!");
          return false;
        }
      });
    },
    foward() {
      this.$refs["form" + this.active].validate(valid => {
        if (valid) {
          if (this.active-- < 0) {
            this.active = 0;
          }
          if(this.active==1){
             this.setEditor("editorpc",this.form1.detail.detailpc);
             this.setEditor("editorh5",this.form1.detail.detailh5);
          }
        } else {
          alert("error submit!!");
          return false;
        }
      });
    },
    //商品信息整体提交
    sub(){
      let fileList =  this.$refs.upload.fileList;
      let param = new FormData();
      param.append("name","测试shangp");
      if(fileList && fileList.length>0){
        for(var i=0;i<fileList.length;i++){
           param.append("file",fileList[i].raw)
        }
      }
      productModify(param).then((res) => {
        this.$util.success();
      });
      
    },
   setEditor(id,value){
        this.editor = new Editor("#"+id);
        this.editor.customConfig.uploadImgShowBase64 = true ;// base 64 存储图片
        this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 //图片大小3M
        this.editor.customConfig.uploadImgMaxLength = 5 //最大五张
        let ref = this;
        this.editor.customConfig.onchange = function (html) {
            // html 即变化之后的内容
            console.log(html);
            // ref.$emit('onchange', html); 
            ref.$emit('input', html);
        }
        this.editor.create();
        if(value){
            this.editor.txt.html(value);
        }
    },
    //超过上传限制
    outlimit(){
       this.$util.errorMsg("超出上传文件个数限制");
    },
    //查看图片
     handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      upImageBefore(file){
         var index =  this.$refs.upload.fileList.indexOf(file);
          if(index>0){
              let left =  this.$refs.upload.fileList[index];
              this.$refs.upload.fileList.splice(index, 1);
              this.$refs.upload.fileList.splice(index-1,0,left);
          }
          
      },
      upImageNext(file){
          var index =  this.$refs.upload.fileList.indexOf(file);
          if(index<this.$refs.upload.fileList.length){
              let right =  this.$refs.upload.fileList[index];
              this.$refs.upload.fileList.splice(index, 1);
              this.$refs.upload.fileList.splice(index+1,0,right);
          }
      },
      //删除图片
      upImageDele(file){
        let fileList = this.$refs["upload"].fileList;
          if(fileList && fileList.length>0){
            for(var i=0;i<fileList.length;i++){
               if(fileList[i]==file){
                  fileList.splice(i, 1)
                  break;
               }
            }
          }
      },
      uploadonchange(file,filelist){
          this.uploadFiles.push(file);
      },
  },
  mounted() {
    //分类
    categorylist().then(res => {
      this.categoryOptions = res;
    });
    productkinds().then(res => {
      this.pkinds = res;
    });
    if(this.active==1){
       this.setEditor("editorpc",this.form1.detail.detailpc);
       this.setEditor("editorh5",this.form1.detail.detailh5);
    }
    //修改
    if(this.$route.query.id){
        
    }
  }
};
</script>